.page {
  width: 100vw;
  height: 100vh;
  //position: fixed;
  //top: 0;
  //left: 0;
  //overflow: hidden;
  // background: #85dbd2;
  .login-content.active {
    // padding-top: 34%;
    // animation: slide-top 0.5s forwards;
    // @keyframes slide-top {
    //   0% {
    //     transform: translateY(0);
    //   }
    //   100% {
    //     transform: translateY(20%);
    //   }
    // }
  }
  .login-content {
    width: 86%;
    margin: 0 auto;
    text-align: center;
    padding-top: 40%;
    box-sizing: border-box;
    .login-logo-active {
      animation: slide-left 0.5s forwards;
      @keyframes slide-left {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(-38%, -90%);
        }
      }
      @keyframes slide-right {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(100%);
        }
      }
    }

    .login-page {
      .login-logo {
        width: 150rpx;
        height: 150rpx;
        background: #ccc;
        border-radius: 32rpx;
        overflow: hidden;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .login-title {
        margin: 30rpx 0;
        img {
          width: 100rpx;
          height: 50rpx;
        }
      }
      .login-text {
        // 字间距
        letter-spacing: 20rpx;
        color: #999;
        font-size: 30rpx;
        margin: 30rpx 0;
      }
    }
    .login-button.active {
      animation: slide-bottom 0.5s forwards;
      @keyframes slide-bottom {
        0% {
          transform: translateY(0);
        }
        100% {
          bottom: 30%;
          // transform: translateY(-80%);
        }
      }
    }
    .login-wecat {
      position: absolute;
      bottom: -350rpx;
      left: 50%;
      transform: translateX(-50%);
      .login-wecat-text {
        button::after {
          border: none !important;
        }
        button {
          width: 238rpx;
          height: 88rpx;
          background: #ffffff;
          border-radius: 44rpx;
          border: 1rpx solid #f5f5f5;
          outline: none;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #101010;
        }
        .iconfont {
          font-size: 40rpx;
          color: #09bb07;
          margin-right: 10rpx;
        }
      }
      img {
        width: 100rpx;
        height: 100rpx;
      }
    }
    .login-button {
      position: fixed;
      width: 100%;
      bottom: 5%;
      left: 0;
      .nut-button.active {
        background-color: #1e74fd;
        color: #fff;
      }
      .nut-button {
        display: block;
        height: 80rpx;
        width: 80%;
        background-color: #f5f5f5;
        border: none;
        margin: 30rpx auto;
      }
      .register {
        color: #999999;
        font-size: 28rpx;
      }
    }
    .login-form {
      width: 100%;
      .login-form-tab {
        display: flex;
        align-items: center;
        margin: 60rpx 0;
        .login-form-tab-item {
          // margin-right: 40rpx ;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #999999;
        }
        .login-form-tab-item.active {
          color: #000;
          font-weight: 600;
        }
      }
      .login-form-input {
        .login-form-input-item {
          margin: 60rpx 0;
          .input-userName::-webkit-input-placeholder,
          .input-password::-webkit-input-placeholder {
            color: #c5c5c5;
          }
          .nut-input {
            padding: 20rpx 50rpx 20rpx 0 !important;
            // line-height: 100rpx;
          }
          .forget-password {
            float: right;
            margin: 2% 2% 0 0;
            font-size: 24rpx;
            color: #c5c5c5;
          }
        }
        .input-verification-password {
          display: flex;
          align-items: center;
        }
      }
    }
    .login-form-active {
      animation: slide-top 0.5s forwards;
      @keyframes slide-top {
        0% {
          transform: translateY(0);
        }
        100% {
          // bottom: -40%;
          transform: translateY(-30%);
        }
      }
    }
  }
}
